window.addEvent ('domready', function () {
	
	// Variables de Drags y Drops
	var $drags = $$('#drags div');
	var $drops = $$('#drops div ');
	
	// Modificamos el desplazamiento de del fondo de los drops (background-position).
	$drops.each (function ($drop, iI) {
		var $bgPos = iI*(-180).toString() + 'px -180px';
		$drop.setStyle ('background-position', $bgPos);
	});
	
	/*
	for (var i = 0 ; i < $drags.length; i++){
		var myDrag = new Drag.Move($drags[i], {
		    droppables: '.drop'	 
		});
	}
	*/
	
	
	// Creamos objeto tipo Drag and Drop Basico
	var miDxD = new DxD ($drags, $drops, {
		container: $('content'),
		dragDelete: true,
		sendToBack: 'ini',
		cssClass: 'miDxD'
	});

	// Definimos funcion de drop correcto (trueDrop)
	miDxD.fncTrueDrop = function ($drag, $drop) {
		if ($drag.ind == $drop.ind) return true;
		else return false;
	};
	
	// Evento trueDrop
	miDxD.addEvent ('trueDrop', function ($drag, $drop) {
		$drop.setStyle ('background-position', $drag.ind*(-180).toString() + 'px top');
	});

	// Disparamos fin de actividad
	miDxD.addEvent ('dropsComplete', function ($drag, $drop) {
		alert ('riiingggg !');
	});
});